<template>
    <div id="courseStudent">

<!--        <el-button @click="addSportStudentAction">添加</el-button>-->
      <table>
       <tr>
<!--          <td><el-button type="primary" icon="el-icon-add" @click="addSportStudentAction">新增学生</el-button></td>-->
          <td><el-input v-model="queryStudentName" placeholder="请输入内容"></el-input></td>
          <td><el-button type="primary" icon="el-icon-search" @click="findSportStudentListPage(1)">搜索</el-button></td>
        </tr>
      </table>
        <br>

        <el-table
          :data="sportStudentListData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="studentName"
            label="姓名"
            width="180">
          </el-table-column>

          <el-table-column
            prop="schoolDate"
            label="入学年份">
          </el-table-column>

          <el-table-column
            prop="className"
            label="班级">
          </el-table-column>

          <el-table-column
            prop="groupName"
            label="小组">
          </el-table-column>

          <el-table-column
            prop="phoneNumber"
            label="电话">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="备注">
          </el-table-column>

          <el-table-column
            prop="status"
            :formatter="statusFormat"
            label="状态"
            width="180">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="toUpdateSportStudentAction(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="toDeleteSportStudentAction(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <br/>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, prev, sizes,pager, next,jumper"
        :total="total">
      </el-pagination>



      <!--    form 表单 start -->
      <el-dialog title="编辑" width="100%" :visible.sync="dialogFormVisible">

        <el-form :model="form">

          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.studentName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="入学年份" :label-width="formLabelWidth">
            <el-select v-model="form.schoolDate" placeholder="请选择入学年份">
              <el-option v-for="item in schoolDateList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="班级" :label-width="formLabelWidth">
            <el-select v-model="form.className" placeholder="请选择班级">
              <el-option v-for="item in classList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="小组" :label-width="formLabelWidth">
            <el-select v-model="form.groupName" placeholder="请选择小组">
              <el-option v-for="item in groupList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input type="number" v-model="form.phoneNumber" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.remarks" autocomplete="off"></el-input>
          </el-form-item>

         <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option v-for="item in studentStatusList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible=false">取 消</el-button>
          <el-button type="primary" @click="updateSportStudent()">保存</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
    import ElementUI from "element-ui";
    import Bus from "../course/bus";

    export default {
        name: "courseStudent",
        data() {
          return {
            schoolDateList: [
              {
                value: '',
                label: '全部'
              }
            ],
            classList: [
              {
                value: '',
                label: '全部'
              }
            ],
            groupList: [
              {
                value: '',
                label: '全部'
              }
            ],
            //颜色选择下拉框
            studentStatusList: [
              {value: 0,label: '已学完'},
              {value: 1,label: '学习中'}
              ],
            sportStudentListData: [],
            pageSize:5,//每页多少条
            total:20,//总条数
            currentPage:1,//当前页
            queryStudentName:'',
            form: {//form表单数据
              id:'1',
              status:'2',
              studentName: '',
            },
            formLabelWidth: '120px',//form表单样式大小
            dialogFormVisible: false,
          }
        },
      methods:{

        //删除数据
        toDeleteSportStudentAction(data){
            let studentName = data.studentName;
            this.$confirm('正在删除('+studentName+')  是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              //删除
              this.deleteSportStudent(data.id);
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          //删除数据
          deleteSportStudent(id){
            // 根据id删除
            this.$store.dispatch("sportStudent/deleteObject", id).then((res) => {
              //刷新数据
              this.findSportStudentListPage(this.currentPage);//表格数据内容
              // this.refreshStudentList();//刷新学生下拉列表数据
              ElementUI.Message({
                message: '删除成功',
                type: 'success'
              });
            }).catch((e) => {
              console.log(e)
            });

          },

        //添加数据
        //   addSportStudentAction(){
        //     //初始化数据
        //     this.form = {id:'',status:1,studentName: ''};
        //     this.dialogFormVisible = true;
        //   },
        //更新数据
        updateSportStudent(){
          let requestData = this.form;
          if(requestData.studentName==null||requestData.studentName==''){
            ElementUI.Message({
              message: '学生名称不能为空',
              type: 'warning'
            });
            return;
          }
          // console.log('requestData ' +JSON.stringify(requestData))
          //更新模板数据
          this.$store.dispatch("sportStudent/updateObject", requestData).then((res) => {
            //隐藏表单
            this.dialogFormVisible = false;
            //初始化数据
            this.form = {id:'',status:1,studentName: ''};
            requestData = {}
            // 查询并刷新数据
            this.findSportStudentListPage(this.currentPage);//表格数据内容
          }).catch((e) => {
            console.log(e)
          });

        },
        //去跟新页面
        toUpdateSportStudentAction(data){
          this.form = data;
          this.dialogFormVisible = true;
        },
        statusFormat(row, column){
          if (row.status === 0) {
            return "已学完";
          } else if (row.status === 1) {
            return "学习中";
          }
        },
        handleCurrentChange(val) {
          //当前页
          // console.log("当前页 "+val);
          this.findSportStudentListPage(val);
        },
        handleSizeChange(val) {
          this.pageSize = val;
          this.findSportStudentListPage(1);
          // console.log(`每页 ${val} 条`);
        },

        //列表查询
        findSportStudentListPage(thisPage){
          // console.log('info...')
          const params = {pageSize:this.pageSize,page:thisPage,studentName:this.queryStudentName}

          this.$store.dispatch("sportStudent/getListPageData", params).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
            if(res!=null){
              this.currentPage = res.page
              this.total = res.total
              this.sportStudentListData = res.rows;
            }

          }).catch((e) => {
            console.log(e)
          });

        },


        // 查询入学年份
        selectSchoolDateList () {
          const param = {dictType:'school_date_type'}
          this.$store.dispatch("dist/selectDistType", param).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
            if (res != null) {
              this.schoolDateList = []
              this.schoolDateList = res
            }
          }).catch((e) => {
            console.log(e)
          });
        },

        // 查询班级信息
        selectClassList () {
          const param = {dictType:'class_type'}
          this.$store.dispatch("dist/selectDistType", param).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
            if (res != null) {
              this.classList = []
              this.classList = res
            }
          }).catch((e) => {
            console.log(e)
          });

        },
        // 查询小组信息
        selectGroupList () {
          const param = {dictType:'group_type'}
          this.$store.dispatch("dist/selectDistType", param).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
            if (res != null) {
              this.groupList = []
              this.groupList = res
            }
          }).catch((e) => {
            console.log(e)
          });
        },

      },

      created() {
      //初始化数据
        this.selectSchoolDateList()
        this.selectClassList()
        this.selectGroupList()
        this.findSportStudentListPage(1)//表格数据内容
        //点击按钮刷新数据
        Bus.$off('toSportStudentRefreshStudentAction')//防止出现多次调用，在执行的时候需要卸掉
        Bus.$on('toSportStudentRefreshStudentAction', data => {
          // console.log("刷新了数据");
          this.findSportStudentListPage(1)//表格数据内容
        });

      }

    }
</script>

<style scoped>

</style>
